<template>
	<view class="content">
		<view class="nuter">
			<navBar @currentIndex="setIndex" :currentI="thisindex" :scrollChange="scrollChange"></navBar>
		</view>
		<swiper :duration="500" :current="thisindex" :data-index='thisindex' @change="toggle" circular
			v-if="scrollChange == 'true'">

			<swiper-item class="swiper-item">
				<!-- 按顺序对应第一个的内容 -->

				< </swiper-item>

					<swiper-item class="swiper-item">
						<!-- 按顺序对应第二个的内容 -->
						Two
					</swiper-item>
					<swiper-item class="swiper-item">
						<!-- 按顺序对应第三个的内容 -->
						Three
					</swiper-item>
					<swiper-item class="swiper-item">
						<!-- 按顺序对应第三个的内容 -->
						Four
					</swiper-item>
					<swiper-item class="swiper-item">
						<!-- 按顺序对应第三个的内容 -->
						Five
					</swiper-item>



		</swiper>

		<swiper :duration="500" :current="thisindex" :data-index='thisindex' @change="toggle" circular
			v-else-if="scrollChange == 'false'">
			<!-- 待接单 -->
			<swiper-item class="swiper-item">
				<view class="jiedanfenge"></view>
				<view v-for="(item,index) in daijielist" :key="index">

					<view class="jiedan">
						<view class="leixing" style="font-weight: bold;">{{item.leixing}}</view>
						<view class="leixtime">{{item.leixtime}}</view>
					</view>
					<view class="yuyuetime">{{item.yuyuetime}}:&nbsp{{item.yutime}}</view>
					<view class="dainhua">
						<view class="xp">{{item.name}}&nbsp&nbsp{{item.phone}}</view>

						<view class="daphone" v-on:click="acphone()">
							<uni-icons type="phone-filled" style="color: #007AFF;"></uni-icons>
							<text>一键打电话</text>
						</view>
					</view>
					<view>{{item.address}}</view>
					<button class="jiedanbtn">接单</button>
					<view class="jiedanfenge"></view>
				</view>

			</swiper-item>
			<!-- 待完工 -->
			<swiper-item class="swiper-item">
				<view class="jiedanfenge"></view>
				<view v-for="(item,index) in daijielist2" :key="index">

					<view class="jiedan">
						<view class="leixing" style="font-weight: bold;">{{item.leixing}}</view>
						<view class="leixtime">{{item.leixtime}}</view>
					</view>
					<view class="yuyuetime">{{item.yuyuetime}}:&nbsp{{item.yutime}}</view>
					<view class="dainhua">
						<view class="xp">{{item.name}}&nbsp&nbsp{{item.phone}}</view>

						<view class="daphone" v-on:click="acphone()">
							<uni-icons type="phone-filled" style="color: #007AFF;"></uni-icons>
							<text>一键打电话</text>
						</view>
					</view>
					<view>{{item.address}}</view>

					<view class="daiwangongbtn">
						<button class="jiedanbtn" type="primary" @click="newtoggle('bottom')">导航</button>


						<button class="jiedanbtn2" type="primary" @click="newtoggle('center')">改约</button>
						<button class="jiedanbtn3" @click="azorwxtoggle(item.leixing)">回单</button>
					</view>

					<view class="jiedanfenge"></view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<!-- 待修改 -->
				<view class="jiedanfenge"></view>
				<view v-for="(item,index) in daijielist2" :key="index">

					<view class="jiedan">
						<view class="leixing" style="font-weight: bold;">{{item.leixing}}</view>
						<view class="leixtime">{{item.leixtime}}</view>
					</view>
					<view class="yuyuetime">{{item.yuyuetime}}:&nbsp{{item.yutime}}</view>
					<view class="dainhua">
						<view class="xp">{{item.name}}&nbsp&nbsp{{item.phone}}</view>

						<view class="daphone" v-on:click="acphone()">
							<uni-icons type="phone-filled" style="color: #007AFF;"></uni-icons>
							<text>一键打电话</text>
						</view>
					</view>
					<view>{{item.address}}</view>
					<view class="daiwangongbtn2">
						<button class="jiedanbtn" type="primary" @click="newtoggle('bottom')">导航</button>
						<button class="jiedanbtn2" @click="btn_dxg">修改</button>

					</view>

					<view class="jiedanfenge"></view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<!-- 已完工 -->
				<view class="jiedanfenge"></view>
				<view v-for="(item,index) in daijielist2" :key="index">

					<view class="jiedan">
						<view class="leixing" style="font-weight: bold;">{{item.leixing}}</view>
						<view class="leixtime">{{item.leixtime}}</view>
					</view>
					<view class="yuyuetime">{{item.yuyuetime}}:&nbsp{{item.yutime}}</view>
					<view class="dainhua">
						<view class="xp">{{item.name}}&nbsp&nbsp{{item.phone}}</view>

						<view class="daphone" v-on:click="acphone()">
							<uni-icons type="phone-filled" style="color: #007AFF;"></uni-icons>
							<text>一键打电话</text>
						</view>
					</view>
					<view>{{item.address}}</view>
					<view class="jiedanfenge"></view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<!-- 已取消 -->
				<view class="jiedanfenge"></view>
				<view v-for="(item,index) in daijielist2" :key="index">

					<view class="jiedan">
						<view class="leixing" style="font-weight: bold;">{{item.leixing}}</view>
						<view class="leixtime">{{item.leixtime}}</view>
					</view>
					<view class="yuyuetime">{{item.yuyuetime}}:&nbsp{{item.yutime}}</view>
					<view class="dainhua">
						<view class="xp">{{item.name}}&nbsp&nbsp{{item.phone}}</view>

						<view class="daphone" v-on:click="acphone()">
							<uni-icons type="phone-filled" style="color: #007AFF;"></uni-icons>
							<text>一键打电话</text>
						</view>
					</view>
					<view>{{item.address}}</view>
					<view class="jiedanfenge"></view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航弹框 -->
		<uni-popup id="popup" ref="popup" :type="type" :animation="false" @change="change">
			<map class="ditu"></map>
		</uni-popup>
		<!-- 改约弹框 -->
		<uni-popup id="gaipopup" ref="gaipopup" :type="type" :animation="false" @change="change">
			<view class="gaiyuetanchang">
				<text class="txtgai1">预约时间</text>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="tanchaungnei2">
						<view class="riqi">{{date}}</view>
						<image src="../../../static/icon/time.jpeg"></image>
					</view>
				</picker>
				<view class="tanchaungnei1">
					<button class="gaibtn1" @click="btn_gyqx">取消</button>
					<button class="gaibtn2" @click="btn_xyg">下一个</button>
				</view>
			</view>
		</uni-popup>
		<!-- 回单安装弹框 -->
		<uni-popup id="azpopup" ref="azpopup" :type="type" :animation="false" @change="change">


			<!-- 内容 -->
			<view>
				<!-- 顶部 -->
				<view class="header">
					<!-- <text style="color: #007AFF;" @click="qx">取消</text> -->
					<text>选择回单类型</text>
					<!-- <text style="color: #007AFF;" @click="tj">提交</text> -->
				</view>
				<radio-group class="neirong">
					<label class="radio">
						过程信息
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck,'icon-RadioButton':!isCheck}"
							@click.stop="setRadioStatus(0)"></text>
					</label>
					<label class="radio">
						安装回单
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck1,'icon-RadioButton':!isCheck1}"
							@click.stop="setRadioStatus(1)"></text>

					</label>
					<label class="radio">
						开箱残缺证回单
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck2,'icon-RadioButton':!isCheck2}"
							@click.stop="setRadioStatus(2)"></text>

					</label>
					<label class="radio">
						取消
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck3,'icon-RadioButton':!isCheck3}"
							@click.stop="setRadioStatus(3)"></text>

					</label>
					<view class="tcbtn_css">
						<view class="tc_view" style="background-color: #b3b0b0;" @click="tcbtn_qx"><text>取消</text>
						</view>
						<view class="tc_view" style="background-color: #108df9;" @click="tcbtn_qd"><text>确定</text>
						</view>
					</view>
				</radio-group>
			</view>

		</uni-popup>
		<!-- 回单维修弹框 -->
		<uni-popup id="wxpopup" ref="wxpopup" :type="type" :animation="false" @change="change">
			<view>维修</view>

			<!-- 内容 -->
			<view>
				<!-- 顶部 -->
				<view class="header">
					<!-- <text style="color: #007AFF;" @click="qx">取消</text> -->
					<text>选择回单类型</text>
					<!-- <text style="color: #007AFF;" @click="tj">提交</text> -->
				</view>
				<radio-group class="neirong">
					<label class="radio">
						过程信息
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck4,'icon-RadioButton':!isCheck4}"
							@click.stop="setRadioStatus(4)"></text>
					</label>
					<label class="radio">
						维修回单
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck5,'icon-RadioButton':!isCheck5}"
							@click.stop="setRadioStatus(5)"></text>

					</label>
					<label class="radio">
						申请配件
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck6,'icon-RadioButton':!isCheck6}"
							@click.stop="setRadioStatus(6)"></text>

					</label>
					<label class="radio">
						取消
						<text class="iconfont radioo" :style="'color:'+color+';'"
							:class="{'icon-radio':isCheck7,'icon-RadioButton':!isCheck7}"
							@click.stop="setRadioStatus(7)"></text>

					</label>
					<view class="tcbtn_css">
						<view class="tc_view" style="background-color: #b3b0b0;" @click="tcbtn_qx"><text>取消</text>
						</view>
						<view class="tc_view" style="background-color: #108df9;" @click="tcbtn_qd"><text>确定</text>
						</view>
					</view>
				</radio-group>
			</view>


		</uni-popup>
	</view>
</template>

<script>
	import navBar from '@/pages/zijiandan/navBar/navBar.vue'
	import popupLayer from '../../../components/popup-layer/popup-layer.vue'
	import popup from '../../../components/uni-popup/uni-popup.vue'

	export default {
		components: {
			navBar,
			popupLayer,
			popup
		},
		props: {
			color: {
				type: String,
				default: '#00ffff'
			},
			value: {
				type: [String, Boolean],
				default: ''
			}
		},
		data() {

			return {
				isCheck: false,
				isCheck1: false,
				isCheck2: false,
				isCheck3: false,
				isCheck4: false,
				isCheck5: false,
				isCheck6: false,
				isCheck7: false,
				radiodata: {
					radio: '',
				},

				chuanruzhi: "",
				date: currentDate,
				type: 'top',
				boolShow: false,
				target: 0,
				thisindex: 0,
				daijielist2: [{
						leixing: "安装",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					},
					{
						leixing: "维修",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"

					}
				],
				daijielist: [{
						leixing: "安装",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					},
					{
						leixing: "维修",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					}, {
						leixing: "安装",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					},
					{
						leixing: "维修",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					}, {
						leixing: "安装",
						leixtime: "2021-03-31 10:23:20",
						yuyuetime: "预约时间",
						yutime: "2021-04-31 10:23:20",
						name: "罗",
						phone: "1307767405",
						address: "广西南宁市西乡塘区安吉万达a座1726"
					}

				],

				// false:固定數量的navbar(4 - 6個)；true:可以滑動的navbar
				scrollChange: 'false' //類型為String；Boolean不可用
			}
			/* 时间 */
			const currentDate = this.getDate({
				format: true
			})
		},
		computed: {
			/* 时间 */
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}

		},
		methods: {
			btn_dxg(){
				uni.navigateTo({
					url:'../xghuidan/xghuidan'
				})
			},
			btn_gyqx(){
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.gaipopup.close();
			},
			btn_xyg(){
				console.log("我选中的时间为:")
				uni.navigateTo({
					url: '../gaiyue/gaiyue'
				})
			},
			setRadioStatus(status) {
				if (status == 0) {
					this.isCheck = true;
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.radiodata["radio"] = "0";
				} else if (status == 1) {
					this.isCheck = false;
					this.isCheck1 = true;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.radiodata["radio"] = "1";
				} else if (status == 2) {
					this.isCheck = false;
					this.isCheck1 = false;
					this.isCheck2 = true;
					this.isCheck3 = false;
					this.radiodata["radio"] = "2";
				} else if (status == 3) {
					this.isCheck = false;
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = true;
					this.radiodata["radio"] = "3";
				}
				 else if (status == 4) {
				 	this.isCheck4 = true;
				 	this.isCheck5 = false;
				 	this.isCheck6 = false;
				 	this.isCheck7 = false;
				 	this.radiodata["radio"] = "4";
				 }
				 else if (status == 5) {
				 	this.isCheck4 = false;
				 	this.isCheck5 =  true ;
				 	this.isCheck6 = false;
				 	this.isCheck7 = false;
				 	this.radiodata["radio"] = "5";
				 }
				 else if (status == 6) {
				 	this.isCheck4 = false;
				 	this.isCheck5 = false;
				 	this.isCheck6 = true;
				 	this.isCheck7 = false;
				 	this.radiodata["radio"] = "6";
				 }else if (status == 7) {
					this.isCheck4 = false;
					this.isCheck5 = false;
					this.isCheck6 = false;
					this.isCheck7 = true ;
					this.radiodata["radio"] = "7";
				}

			},
			// tcbtn_qd(){
			// 	uni.navigateTo({
			// 		url:'xuanxiangka'
			// 	})
			// },
			tcbtn_qd() {
				console.log(this.radiodata["radio"]);
				let num = this.radiodata["radio"];
				console.log("6666666：" + num)
				if (num == 0) {
					uni.navigateTo({
						url: '../anzhuanghuidan/guochenghuidan'
					})
				} else if (num == 1) {
					console.log("111111111111")
					uni.navigateTo({
						url:'../anzhuanghuidan/azhuidan'
					});
				} else if (num == 2) {
					uni.navigateTo({
						url: '../anzhuanghuidan/kxqzhuidan'
					})
				} else if (num == 3) {
					uni.navigateTo({
						url: '../anzhuanghuidan/qxhuidan'
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '../anzhuanghuidan/guochenghuidan'
					})
				} else if (num == 5) {
					console.log("55555w：" + num)
					uni.navigateTo({
						url:'../peijian/wxhuidan'
					})
				} else if (num == 6) {
					uni.navigateTo({
						url: '../peijian/weixiu'
					})
				}
				else if (num == 7) {
					uni.navigateTo({
						url: '../anzhuanghuidan/qxhuidan'
					})
				}

			},
			tcbtn_qx() {
				console.log("已取消");
				this.$refs.azpopup.close();
				this.$refs.wxpopup.close();
			},
			//回单更具类型弹出相应弹窗
			azorwxtoggle(chuanruzhi) {
				console.log("调用方法")
				console.log(chuanruzhi)
				this.type = 'bottom'
				this.chuanruzhi = chuanruzhi
				if (this.chuanruzhi == '安装') {

					this.$refs.azpopup.open()
					console.log("到了安装这里")
				} else if (this.chuanruzhi == '维修') {
					this.$refs.wxpopup.open()
					console.log("到了维修这里")
				}




			},
			//弹出框弹出与关闭
			newtoggle(type) {
				console.log("调用方法")
				this.type = type
				if (this.type == 'bottom') {
					this.$refs.popup.open()
				} else if (this.type == 'center') {
					this.$refs.gaipopup.open()
					console.log("到了这里")
				}

			},
			//输出弹框状态
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			//打电话
			acphone() {
				uni.makePhoneCall({
					phoneNumber: '13557294096'
				})
			},
			// 滑動切换触发的事件
			toggle(e) {
				let index = e.detail.current
				this.target = index
			},
			//点击nav控制下面的展示
			setIndex(e) {
				this.thisindex = e
			},
			/* 日期 */
			bindDateChange: function(e) {
				this.date = e.target.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		},
		watch: {
			target(val) {
				this.setIndex(val)
			}
		}

	}
</script>

<style lang="scss">
	@import url("/static/xhy-radio/xhy-iconfont.css");

	.header {
		display: flex;
		background-color: #f0f0f0;
		justify-content: center;
		align-items: center;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.radioo {
		width: 48upx;
		height: 48upx;
		margin-right: 10upx;
		margin-top: 10upx;
		float: right;
		position: relative;
		bottom: 6px;
	}

	.neirong {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.tcbtn_css {
		display: flex;
		flex-direction: row;
	}

	.tc_view {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;

		height: 50px;
	}

	.radio {
		margin-top: 4rpx;
		padding-top: 10rpx;
		padding-bottom: 3rpx;
		background-color: #FFFFFF;
		padding-left: 10rpx;
	}

	.azhuibox1_huidanleixing {
		border: 1px solid black;
	}

	.azhuibox1 {
		height: 200px;
		background-color: #ffffff;
	}

	/deep/.gaibtn1 {
		margin-top: 30px;
		width: 70px;
		font-size: 12px;
		padding-left: 14px;
		padding-right: 14px;
		-moz-box-shadow: inset 0 0 10px #CCC;
		-webkit-box-shadow: inset 0 0 10px #CCC;
		box-shadow: inset 0 0 10px #CCC;
	}

	.gaibtn2 {
		margin-top: 30px;
		width: 70px;
		font-size: 12px;
		padding-right: 14px;
		background-color: #55aaff;
		-moz-box-shadow: inset 0 0 10px #CCC;
		-webkit-box-shadow: inset 0 0 10px #CCC;
		box-shadow: inset 0 0 10px #CCC;

	}

	.riqi {
		width: 130px;
	}

	.tanchaungnei2 {
		width: 180px;
		height: 25px;
		border: 1px solid black;
		margin-left: 5%;
		margin-top: 10px;
		display: flex;

		image {
			margin-right: 3px;
			margin-left: 30px;

			margin-top: 2.5px;
			width: 20px;
			height: 20px;
		}

	}

	.tanchaungnei1 {

		display: flex;
	}

	.gaiyuetanchang {
		width: 200px;
		height: 130px;
		background-color: #FFFFFF;

	}

	.txtgai1 {
		// text-align: center;
		// margin-top: 0px;

		margin-left: 65px;
	}

	.ditu {
		width: 100%;
	}

	/* 第一个选项卡样式 */
	.daiwangongbtn2 {
		display: flex;
		margin-left: 150px;
	}

	.daiwangongbtn {
		display: flex;
		margin-left: 50px;
	}

	.jiedanbtn2 {

		width: 65px;
		height: 30px;
		background-color: #007AFF;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFB400;
		color: #FFFFFF;
	}

	.jiedanbtn3 {

		width: 65px;
		height: 30px;
		background-color: #007AFF;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #6D6D72;
		color: #FFFFFF;
	}

	.jiedanbtn {

		width: 65px;
		height: 30px;
		background-color: #007AFF;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;

	}

	.jiedanbeijing {
		background-color: #FFFFFF;
	}

	.xp {
		text-align: center;
		margin-left: 1px;
		margin-top: 7px;
		float: left;
	}

	.dainhua {
		height: 40px;
		//float: left;
	}

	.daphone {
		margin-left: 20px;
		float: left;
		border: 1px solid black;
		width: 100px;
		line-height: 2em;
		text-align: center;

	}

	.leixing {
		width: 20%;
		float: left;
	}

	.leixtime {
		float: left;
		width: 80%;

	}

	.jiedanfenge {
		height: 10px;
		width: 100%;
		background-color: #f1f1f1;
	}

	.nuter {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
	}

	.nuter view {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
		transition: all 0.5s ease .1s;
		background-color: #f0f0f0;
	}

	.active {
		box-sizing: border-box;
		color: #007AFF;
		border-bottom: 5rpx solid #00aaff;
		background-color: #f3ffff;
		border-radius: 10rpx;
		box-shadow: 3px 3px 5px #888888;
	}

	swiper {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		/* text-align: center; */
		/* line-height: 300rpx; */
		/* background-color: red; */
	}

	.swiper-item {
		overflow-y: scroll;
		width: 99.5%;
		height: 99%;
		/* background-color: white; */
		/* height: 99%; */
		box-sizing: border-box;
		padding: 1rpx;
	}
</style>
